<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { TokenStore } from '../store/user'
import { UserStore } from '../store/user'
import { useRouter } from 'vue-router'
import axios from 'axios';
import Yzm from './yzm.vue'
import Picture from './Picture.vue'

const router = useRouter()

const form = reactive({
    email: '3495789702@qq.com',
    password: '111111q',
    captcha: '',
    sign: ''
})

const formRef = ref(null);

const rules = {
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        // 添加正则表达式验证
        {
            pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z0-9]{6,16}$/,
            message: '密码长度为 6 到 16 位，且必须同时包含字母和数字',
            trigger: 'blur'
        }
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, message: '验证码长度至少为4位', trigger: 'blur' }
    ]
};

const login = async ()  => {
    if (form.email && form.password && form.captcha && form.sign) {
        const dto = {
            email: form.email,
            password: form.password,
            code: form.captcha,
            sign: form.sign
        }
        console.log(dto)
        const response = await axios.post('http://localhost:8080/zhongjianyu.cat.com/api/user/login', dto);
        if (response.data.code !== 200) {
            ElMessage.error(response.data.msg)
            return
        }
        console.log(response.data)
        const data = response.data.data
        const accessToken = data.accessToken
        const refreshToken = data.refreshToken
        const tokenStore = TokenStore()
        tokenStore.saveAccessToken(accessToken)
        tokenStore.saveRefreshToken(refreshToken)
        const userStore = UserStore()
        const user = data.user
        userStore.saveUser(user)
        console.log(user)
        ElMessage.success('登录成功')
        router.push({ name: 'Home' })
    } else {
        console.log(form)
        ElMessage.error('用户名和密码不能为空')
    }
}

const circleUrl = ref('src/assets/vue.svg');

</script>

<template>
    <div style="display: flex; flex-direction: column; align-items: center; margin-top: 10%;">
        <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password" />
            </el-form-item>

            <el-form-item label="验证码" prop="captcha">
                <el-input v-model="form.captcha" />
            </el-form-item>
        </el-form>
        <div>
            <yzm v-model:sign="form.sign"></yzm>
        </div>
        <div>
            <el-button type="primary" native-type="submit" @click="login">登录</el-button>
        </div>


        <el-link style="margin-top: 25px;" @click="router.push({ name: 'Register' })" type="primary"><b
                style="color:firebrick;">没有账号？点击注册</b></el-link>
    </div>
</template>